<template>
  <view id="SETPW">
    <zk-topBg
      color="#000718"
      :showBg="false"
      paddingTop="40"
      :showBack="true"
      title="设置新密码">
    </zk-topBg>
    <view class="item">
      <view class="title fs_18">请输入原密码</view>
      <view
        class="inner_input"
        :class="[accord ? '' : 'err', isfocus == 'oldpwd' ? 'isfocus' : '']">
        <input
          @blur="handleBlur"
          @focus="handelFocus"
          v-model.trim="oldPassWord"
          data-pw="oldpwd"
          placeholder-style="font-size: 14px; color: #969696;"
          placeholder="请输入原密码" />
      </view>
    </view>
    <view class="item">
      <view class="title fs_18">新密码</view>
      <view
        class="inner_input"
        :class="[accord ? '' : 'err', isfocus == 'pwd' ? 'isfocus' : '']">
        <input
          @blur="handleBlur"
          @focus="handelFocus"
          v-model.trim="newPassWord"
          data-pw="pwd"
          placeholder-style="font-size: 14px; color: #969696;"
          placeholder="请输入新密码" />
      </view>

      <view
        class="inner_input"
        :class="[accord ? '' : 'err', isfocus == 'agree_pwd' ? 'isfocus' : '']">
        <input
          @blur="handleBlur"
          @focus="handelFocus"
          v-model.trim="newPassWord2"
          data-pw="agree_pwd"
          placeholder-style="font-size: 14px; color: #969696;"
          placeholder="再次输入新密码" />
      </view>
    </view>
    <view class="bottom_box">
      <zk-btn @handleTap="shubmitAllInfo" class="submit_btn"> 提交</zk-btn>
    </view>
  </view>
  <zk-tips></zk-tips>
</template>

<script lang="ts" setup>
import { useToastStore } from "@/stores/modules/toast";
import { useMemberStore } from "@/stores/modules/member";
const toastStore = useToastStore();
const memberStore = useMemberStore();
const oldPassWord = ref("");
const newPassWord = ref("");
const newPassWord2 = ref("");
const isfocus: any = ref("");
const accord: any = ref(true);
//获取焦点是边框
const handelFocus = (e: any) => {
  isfocus.value = e.currentTarget.dataset.pw;
};
//失去时
const handleBlur = (e: any) => {
  isfocus.value = "";
};
//提交
const shubmitAllInfo = async () => {
  if (
    oldPassWord.value == "" ||
    newPassWord.value == "" ||
    newPassWord2.value == ""
  ) {
    toastStore.show = true;
    toastStore.title = "请完善信息";
    return;
  }
  if (newPassWord.value !== newPassWord2.value) {
    toastStore.show = true;
    toastStore.title = "两次密码输入不一致";
    return;
  }
  await memberStore.updatePasswordFn({
    OldPassword: oldPassWord.value,
    Password: newPassWord.value,
  });
  toastStore.show = true;
  toastStore.type = "success";
  toastStore.title = "修改成功";
};
</script>

<style lang="scss" scoped>
#SETPW {
  width: 100vw;
  height: 100vh;
  .item {
    padding: 10px 20px;
    .title {
      color: #000718;
      margin: 10px 0;
    }
  }
  .inner_input {
    margin: 18px 0;
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 24px;
    /* #FFFFFF 白色 100 */
    background: #f8f8f8;
    /* 白色背景090E1D 5% 16 32 */
    box-shadow: 0px 16px 32px 0px rgba(9, 14, 29, 0.05);
    border-radius: 4px;

    &.isfocus {
      /* #0097ac 主色调 */
      border: 1px solid #67c23a;
      /* 效果样式2 */
      box-shadow: 0px 0px 0px 4px hsla(100, 54%, 49%, 0.25);
    }

    input {
      width: 100%;
      color: rgb(61, 73, 102);
      font-family: SF Pro Display;
      font-size: 16px;
      font-weight: 600;
    }
  }
  /********* 底部按钮 *********/
  .bottom_box {
    height: 72px;
    width: 100%;
    box-shadow: 0px -4px 15px 0px rgba(0, 0, 0, 0.05);
    background: rgb(255, 255, 255);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    & > view {
      margin: 0 10px;
      justify-content: center;
    }

    .submit_btn {
      width: 400px;
    }
  }
}
</style>
